import React from 'react'
import { Card, Form, Icon, Input, Button, message, Checkbox } from 'antd';

const FormItem = Form.Item;
class Login extends React.Component {

    handleSubmit = () => {
        // getFieldsValue	获取一组输入控件的值，如不传入参数，则获取全部组件的值
        const userInfo = this.props.form.getFieldsValue();
        // validateFields	校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件
        this.props.form.validateFields((err, values) => {
            if (!err) {
                message.success(`${userInfo.username} 恭喜你，通过本次表单校验 当前密码为 ${userInfo.password} `)
            }
        })

    }

    render() {
        //封装表单， 可以实现表单双向绑定
        const { getFieldDecorator } = this.props.form
        return (
            <div>
                <Card title="登陆行内表单" className="warp">
                    <Form layout="inline">
                        <FormItem>
                            <Input placeholder="请输入用户名" />
                        </FormItem>
                        <FormItem>
                            <Input placeholder="请输入密码" />
                        </FormItem>
                        <FormItem>
                            <Button type="primary">
                                登陆
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
                <Card title="登陆水平表单" className="warp">
                    <Form style={{ width: 300 }} >
                        <FormItem>
                            {getFieldDecorator('username', {
                                initialValue: 'Jack',
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your username!'
                                    },
                                    {
                                        max: 10, min: 6,
                                        message: '请输入合适的长度'
                                    },
                                    {
                                        pattern: new RegExp('^\\w+$', 'g'),
                                        message: '输入的字符不匹配'
                                    }
                                ],
                            })(
                                <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
                            )}
                        </FormItem>
                        <FormItem>
                            {
                                getFieldDecorator('password', {
                                    // initialValue: '123456', 默认输入值
                                    rules: [{ required: true, message: 'Please input your Password!' }]
                                })(
                                    <Input prefix={<Icon type="lock" />} placeholder="请输入密码" type="password" />
                                )
                            }
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('remember', {
                                valuePropName: 'checked',
                                initialValue: true,
                            })(
                                <Checkbox>记住密码</Checkbox>
                            )}
                            <a href="#" style={{float: 'right'}}>忘记密码</a>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" block onClick={this.handleSubmit}>
                                登陆
                            </Button>
                        </FormItem>
                    </Form>
                </Card>

            </div>
        )
    }
}



export default Form.create()(Login);